<template>
    <com-header title="帮助中心"></com-header>
    <van-grid :column-num="3">
        <van-grid-item v-for="(item, index) in types" :key="index" @click="changeItem(item)">
            <div :class="{'text-green': active == item.id, 'text-7': active != item.id}" v-text="item.name"></div>
        </van-grid-item>
    </van-grid>
    <div class="padded-10">
        <div class="text-3 ftn14 p-b-10" v-for="(item, index) in content" :key="index">
            <div class="text-3 ftn14 p-b-10" v-text="item.title"></div>
            <div class="text-7 ftn13" v-html="item.content"></div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent,onMounted, ref } from "vue";
import { fnGetHelpType, fnGetHelpData } from "@/service";
type IHelpType = {
    id: number,
    name: string
}

export default defineComponent({
    setup() {
        const types = ref<IHelpType[]>(), content = ref<any>(), active = ref(0);
        // 切换类型
        const changeItem = (e: IHelpType) => {
            let {id} = e;
            active.value = id;
            getHelpData(id);
        }
        const getHelpData = (id: any) => {
            fnGetHelpData({type: id}).then(res => {
                if (res && res.status) {
                    content.value = res.data;
                }
            })
        }
        onMounted(() => {
            // 类型
            fnGetHelpType().then(res => {
                if (res && res.status) {
                    types.value = res.data;
                    let [{id}] = res.data;
                    active.value = id;
                    getHelpData(id)
                }
            })
        })
        return {
            types,
            content,
            changeItem,
            active
        }
    }
})
</script>